/**
* Ejemplo básico
* Demostración sencilla de los modos de funcionamiento de un widget AppliCast(tm)
* y de los manejadores de eventos.
*
* (c) 2009 ILERRED, S.L.
*/

/**
* Widget
* Clase que representa a nuestro widget
*/
var Widget = Class.create({

  /**
  * constructor
  */
  initialize: function() {
    // ruta a los recursos
    this.assetsPath = './assets/';

    // modo pantalla completa ¿?
    this.options = {
      fullscreen: false
    };
    this.options = { fullscreen: false };
    Object.extend(this.options, arguments[0] || { });

    // nodos que contendran el "layout" del estado activo
    this.stateNodes = [$('state-error'), $('state-loading'), $('state-normal'), $('state-active')];
    if ( this.options.fullscreen )
      this.stateNodes.push($('state-fullscreen'));


    // Manejadores de eventos
    // Respuesta de teclado
    Event.observe('keypress', this.onKeyPress.bind(this));
    // Respuesta a cambio de modo
    Event.observe('modechange', this.onModeChange.bind(this));

    if ( !this.options.fullscreen )
      this.changeMode(WidgetMode.NORMALFOCUS);
    else
      this.changeMode(WidgetMode.FULLSCREEN);
  },

  /**
  * changeMode - Cambia la representación visual del widget
  */
  changeMode: function(newMode) {
    this.currentMode = newMode;
    this.setupComponent(newMode);
    this.showComponent(newMode);
  },

  /**
  * showComponent - Muestra el nodo que representa al modo activo
  */
  showComponent: function(index) {
    if ( index < 0 || index >= this.stateNodes.length ) return;

    for(var i=0, m=this.stateNodes.length; i < m; ++i) {
      if ( i == index )
        this.stateNodes[i].setVisible(true);
      else
        this.stateNodes[i].setVisible(false);
    }
  },

  /**
  * setupComponent - Realiza inicializaciones en la presentación del modo
  * activo.
  */
  setupComponent: function(index) {
    if ( index < 0 || index >= WidgetModes.length ) return;

    switch(WidgetModes[index]) {
      case 'Error':
        $('bg-error').loadImage(this.assetsPath + 'backgrounds/bg-error.png');
        break;

      case 'Loading':
        break;

      case 'Normal/Focus':
        $('bg-normal').loadImage(this.assetsPath + 'backgrounds/bg-normal.png');
        break;

      case 'Active':
        $('bg-active').loadImage(this.assetsPath + 'backgrounds/bg-active.png');
        break;

      case 'Full-Screen':
        $('text-state').setStr('Estado: "Full-Screen"');
        break;
    }
  },

  /**
  * onKeyPress - Manejador de respuesta de teclado
  */
  onKeyPress: function(e) {
    if ( !e ) return;

    switch( e.keyCode ) {
      case Event.KEY_DOWN:
        $('text-keyboard').setStr('Tecla: Abajo');
        break;

      case Event.KEY_RIGHT:
        $('text-keyboard').setStr('Tecla: Derecha');
        break;

      case Event.KEY_UP:
        $('text-keyboard').setStr('Tecla: Arriba');
        break;

      case Event.KEY_LEFT:
        $('text-keyboard').setStr('Tecla: Izquierda');
        break;

      case Event.KEY_CONFIRM:
        $('text-keyboard').setStr('Tecla: Confirmar/OK');
        if ( this.currentMode == WidgetMode.ACTIVE )
          changeToFullscreen();
        break;

      case Event.KEY_YELLOW:
        $('text-keyboard').setStr('Tecla: Amarillo');
        break;

      case Event.KEY_RED:
        $('text-keyboard').setStr('Tecla: Rojo');
        break;

      case Event.KEY_GREEN:
        $('text-keyboard').setStr('Tecla: Verde');
        break;

      case Event.KEY_BLUE:
        $('text-keyboard').setStr('Tecla: Azul');
        break;
    }
  },

  /**
  * onModeChange - Manejador de respuesta a cambios de modo en el widget
  */
  onModeChange: function(e) {
    if ( !e ) return;

    switch( WidgetModes[e.mode] ) {
      case 'Normal/Focus':
        $('text-state').setStr('Estado: ' + (e.focus ? '"Focus"': '"Normal/Unfocus"'));
        break;

      case 'Active':
        $('text-state').setStr('Estado: "Active"');
        this.changeMode(WidgetMode.ACTIVE);
        break;
    }
  }
});